{% extends 'formwork.html' %}

{% block content %}
    <div class="row">
        <div class="col-xl-3 col-lg-6">
            <section class="panel panel-transparent">
                <header class="panel-heading">
                    <div class="panel-actions">
                        <a href="#" class="fa fa-caret-down"></a>
                        <a href="#" class="fa fa-times"></a>
                    </div>

                    <h2 class="panel-title">My Profile</h2>
                </header>
                <div class="panel-body">
                    <section class="panel panel-group">
                        <header class="panel-heading bg-primary">
                            <div class="widget-profile-info">
                                <div class="profile-picture">
                                    <img src="/static/images/Alex0.jpg" alt="logged-user">
                                </div>
                                <div class="profile-info">
                                    <h4 class="name text-semibold">John Doe</h4>
                                    <h5 class="role">Administrator</h5>
                                    <div class="profile-footer">
                                        <a href="#">(edit profile)</a>
                                    </div>
                                </div>
                            </div>

                        </header>
                        <div id="accordion">
                            <div class="panel panel-accordion panel-accordion-first">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse"
                                           data-parent="#accordion" href="#collapse1One">
                                            <i class="fa fa-check"></i>
                                            <span>Tasks</span>
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapse1One" class="accordion-body collapse in">
                                    <div class="panel-body">
                                        <ul class="widget-todo-list">
                                            <li>
                                                <div class="checkbox-custom checkbox-default">
                                                    <input type="checkbox" id="todoListItem2"
                                                           class="todo-check">
                                                    <label class="todo-label" for="todoListItem2"><span>Lorem ipsum dolor sit amet</span></label>
                                                </div>
                                                <div class="todo-actions">
                                                    <a class="todo-remove" href="#">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="checkbox-custom checkbox-default">
                                                    <input type="checkbox" id="todoListItem3"
                                                           class="todo-check">
                                                    <label class="todo-label" for="todoListItem3"><span>Lorem ipsum dolor sit amet</span></label>
                                                </div>
                                                <div class="todo-actions">
                                                    <a class="todo-remove" href="#">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="checkbox-custom checkbox-default">
                                                    <input type="checkbox" id="todoListItem4"
                                                           class="todo-check">
                                                    <label class="todo-label" for="todoListItem4"><span>Lorem ipsum dolor sit amet</span></label>
                                                </div>
                                                <div class="todo-actions">
                                                    <a class="todo-remove" href="#">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="checkbox-custom checkbox-default">
                                                    <input type="checkbox" id="todoListItem5"
                                                           class="todo-check">
                                                    <label class="todo-label" for="todoListItem5"><span>Lorem ipsum dolor sit amet</span></label>
                                                </div>
                                                <div class="todo-actions">
                                                    <a class="todo-remove" href="#">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="checkbox-custom checkbox-default">
                                                    <input type="checkbox" id="todoListItem6"
                                                           class="todo-check">
                                                    <label class="todo-label" for="todoListItem6"><span>Lorem ipsum dolor sit amet</span></label>
                                                </div>
                                                <div class="todo-actions">
                                                    <a class="todo-remove" href="#">
                                                        <i class="fa fa-times"></i>
                                                    </a>
                                                </div>
                                            </li>
                                        </ul>
                                        <hr class="solid mt-sm mb-lg">
                                        <form method="get" class="form-horizontal form-bordered">
                                            <div class="form-group">
                                                <div class="col-sm-12">
                                                    <div class="input-group mb-md">
                                                        <label for="text"></label>
                                                        <input id="text" type="text" class="form-control">
                                                        <div class="input-group-btn">
                                                            <button type="button" class="btn btn-primary"
                                                                    tabindex="-1">Add
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="panel panel-accordion">
                                <div class="panel-heading">
                                    <h4 class="panel-title">
                                        <a class="accordion-toggle" data-toggle="collapse"
                                           data-parent="#accordion" href="#collapse1Two">
                                            <i class="fa fa-comment"></i> Messages
                                        </a>
                                    </h4>
                                </div>
                                <div id="collapse1Two" class="accordion-body collapse">
                                    <div class="panel-body">
                                        <ul class="simple-user-list mb-xlg">
                                            <li>
                                                <figure class="image rounded">
                                                    <img src="/static/images/Alex0.jpg" style="width: 30px;"
                                                         alt="Joseph Doe Junior" class="img-circle">
                                                </figure>
                                                <span class="title">Joseph Doe Junior</span>
                                                <span class="message">Lorem ipsum dolor sit.</span>
                                            </li>
                                            <li>
                                                <figure class="image rounded">
                                                    <img src="/static/images/Alex0.jpg" style="width: 30px;"
                                                         alt="Joseph Junior" class="img-circle">
                                                </figure>
                                                <span class="title">Joseph Junior</span>
                                                <span class="message">Lorem ipsum dolor sit.</span>
                                            </li>
                                            <li>
                                                <figure class="image rounded">
                                                    <img src="/static/images/Alex0.jpg" style="width: 30px;"
                                                         alt="Joe Junior"
                                                         class="img-circle">
                                                </figure>
                                                <span class="title">Joe Junior</span>
                                                <span class="message">Lorem ipsum dolor sit.</span>
                                            </li>
                                            <li>
                                                <figure class="image rounded">
                                                    <img src="/static/images/Alex0.jpg" style="width: 30px;"
                                                         alt="Joseph Doe Junior" class="img-circle">
                                                </figure>
                                                <span class="title">Joseph Doe Junior</span>
                                                <span class="message">Lorem ipsum dolor sit.</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </section>
        </div>
        <div class="col-xl-3 col-lg-6">
            <section class="panel panel-transparent">
                <header class="panel-heading">
                    <div class="panel-actions">
                        <a href="#" class="fa fa-caret-down"></a>
                        <a href="#" class="fa fa-times"></a>
                    </div>

                    <h2 class="panel-title">My Stats</h2>
                </header>
                <div class="panel-body">
                    <section class="panel">
                        <div class="panel-body">
                            <div class="small-chart pull-right" id="sparklineBarDash"></div>
                            <script type="text/javascript">
                                const sparklineBarDashData = [5, 6, 7, 2, 0, 4, 2, 4, 2, 0, 4, 2, 4, 2, 0, 4];
                            </script>
                            <div class="h4 text-bold mb-none">488</div>
                            <p class="text-xs text-muted mb-none">Average Profile Visits</p>
                        </div>
                    </section>
                    <section class="panel">
                        <div class="panel-body">
                            <div class="circular-bar circular-bar-xs m-none mt-xs mr-md pull-right">
                                <div class="circular-bar-chart" data-percent="45"
                                     data-plugin-options='{ "barColor": "#2baab1", "delay": 300, "size": 50, "lineWidth": 4 }'>
                                    <strong>Average</strong>
                                    <label><span class="percent">45</span>%</label>
                                </div>
                            </div>
                            <div class="h4 text-bold mb-none">12</div>
                            <p class="text-xs text-muted mb-none">Working Projects</p>
                        </div>
                    </section>
                    <section class="panel">
                        <div class="panel-body">
                            <div class="small-chart pull-right" id="sparklineLineDash"></div>
                            <script type="text/javascript">
                                const sparklineLineDashData = [15, 16, 17, 19, 10, 15, 13, 12, 12, 14, 16, 17];
                            </script>
                            <div class="h4 text-bold mb-none">89</div>
                            <p class="text-xs text-muted mb-none">Pending Tasks</p>
                        </div>
                    </section>
                </div>
            </section>
            <header class="panel-heading">
                <div class="panel-actions">
                    <a href="#" class="fa fa-caret-down"></a>
                    <a href="#" class="fa fa-times"></a>
                </div>

                <h2 class="panel-title">
                    <span class="label label-primary label-sm text-normal va-middle mr-sm">198</span>
                    <span class="va-middle">Friends</span>
                </h2>
            </header>
            <div class="panel-body">
                <div class="content">
                    <ul class="simple-user-list">
                        <li>
                            <figure class="image rounded">
                                <img src="/static/images/Alex0.jpg" style="width: 30px;" alt="Joseph Doe Junior"
                                     class="img-circle">
                            </figure>
                            <span class="title">Joseph Doe Junior</span>
                            <span class="message truncate">Lorem ipsum dolor sit.</span>
                        </li>
                        <li>
                            <figure class="image rounded">
                                <img src="/static/images/Alex0.jpg" style="width: 30px;" alt="Joseph Junior"
                                     class="img-circle">
                            </figure>
                            <span class="title">Joseph Junior</span>
                            <span class="message truncate">Lorem ipsum dolor sit.</span>
                        </li>
                        <li>
                            <figure class="image rounded">
                                <img src="/static/images/Alex0.jpg" style="width: 30px;" alt="Joe Junior"
                                     class="img-circle">
                            </figure>
                            <span class="title">Joe Junior</span>
                            <span class="message truncate">Lorem ipsum dolor sit.</span>
                        </li>
                    </ul>
                    <hr class="dotted short">
                    <div class="text-right">
                        <a class="text-uppercase text-muted" href="#">(View All)</a>
                    </div>
                </div>
            </div>
            <div class="panel-footer">
                <div class="input-group input-search">
                    <label for="q"></label>
                    <input type="text" class="form-control" name="q" id="q" placeholder="Search...">
                    <span class="input-group-btn">
								<button class="btn30 btn-default" type="submit">
									<i class="fa fa-search"></i>
								</button>
							</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-6 col-lg-6">
            <section class="panel">
                <header class="panel-heading panel-heading-transparent">
                    <div class="panel-actions">
                        <a href="#" class="fa fa-caret-down"></a>
                        <a href="#" class="fa fa-times"></a>
                    </div>
                    <h2 class="panel-title">Company Activity</h2>
                </header>
                <div class="panel-body">
                    <div class="timeline timeline-simple mt-xlg mb-md">
                        <div class="tm-body">
                            <div class="tm-title">
                                <h3 class="h5 text-uppercase">November 2013</h3>
                            </div>
                            <ol class="tm-items">
                                <li>
                                    <div class="tm-box">
                                        <p class="text-muted mb-none">7 months ago.</p>
                                        <p>
                                            It's awesome when we find a good solution for our projects, JSOFT
                                            Admin is <span class="text-primary">#awesome</span>
                                        </p>
                                    </div>
                                </li>
                                <li>
                                    <div class="tm-box">
                                        <p class="text-muted mb-none">7 months ago.</p>
                                        <p>
                                            Checkout! How cool is that!
                                        </p>
                                        <div class="thumbnail-gallery">
                                            <a class="img-thumbnail lightbox"
                                               href="/static/images/Alex0.jpg"
                                               data-plugin-options='{ "type":"image" }'>
                                                <img class="img-responsive" style="width: 215px;"
                                                     src="/static/images/Alex0.jpg" alt="project-4">
                                                <span class="zoom">
                                                    <i class="fa fa-search"></i>
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="tm-box">
                                        <p class="text-muted mb-none">7 months ago.</p>
                                        <p>
                                            It's awesome when we find a good solution for our projects, JSOFT
                                            Admin is <span class="text-primary">#awesome</span>
                                        </p>
                                    </div>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <div class="col-lg-6 col-md-12">
            <section class="panel">
                <header class="panel-heading panel-heading-transparent">
                    <div class="panel-actions">
                        <a href="#" class="fa fa-caret-down"></a>
                        <a href="#" class="fa fa-times"></a>
                    </div>

                    <h2 class="panel-title">Projects Stats</h2>
                </header>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped mb-none">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Project</th>
                                <th>Status</th>
                                <th>Progress</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1</td>
                                <td>JSOFT - Responsive HTML5 Template</td>
                                <td><span class="label label-success">Success</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded m-none mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 100%;">
                                            100%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>JSOFT - Responsive Drupal 7 Theme</td>
                                <td><span class="label label-success">Success</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded m-none mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 100%;">
                                            100%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Tucson - Responsive HTML5 Template</td>
                                <td><span class="label label-warning">Warning</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded m-none mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 60%;">
                                            60%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>4</td>
                                <td>Tucson - Responsive Business WordPress Theme</td>
                                <td><span class="label label-success">Success</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded m-none mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 90%;">
                                            90%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>5</td>
                                <td>JSOFT - Responsive Admin HTML5 Template</td>
                                <td><span class="label label-warning">Warning</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded m-none mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 45%;">
                                            45%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>6</td>
                                <td>JSOFT - Responsive HTML5 Template</td>
                                <td><span class="label label-danger">Danger</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded m-none mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 40%;">
                                            40%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>7</td>
                                <td>JSOFT - Responsive Drupal 7 Theme</td>
                                <td><span class="label label-success">Success</span></td>
                                <td>
                                    <div class="progress progress-sm progress-half-rounded mt-xs light">
                                        <div class="progress-bar progress-bar-primary" role="progressbar"
                                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                             style="width: 95%;">
                                            95%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            <div>
                <section class="panel panel-featured-left panel-featured-primary">
                    <div class="panel-body">
                        <div class="widget-summary">
                            <div class="widget-summary-col widget-summary-col-icon">
                                <div class="summary-icon bg-primary">
                                    <i class="fa fa-life-ring"></i>
                                </div>
                            </div>
                            <div class="widget-summary-col">
                                <div class="summary">
                                    <h4 class="title">Support Questions</h4>
                                    <div class="info">
                                        <strong class="amount">1281</strong>
                                        <span class="text-primary">(14 unread)</span>
                                    </div>
                                </div>
                                <div class="summary-footer">
                                    <a class="text-muted text-uppercase">(view all)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div>
                <section class="panel panel-featured-left panel-featured-secondary">
                    <div class="panel-body">
                        <div class="widget-summary">
                            <div class="widget-summary-col widget-summary-col-icon">
                                <div class="summary-icon bg-secondary">
                                    <i class="fa fa-usd"></i>
                                </div>
                            </div>
                            <div class="widget-summary-col">
                                <div class="summary">
                                    <h4 class="title">Total Profit</h4>
                                    <div class="info">
                                        <strong class="amount">$ 14,890.30</strong>
                                    </div>
                                </div>
                                <div class="summary-footer">
                                    <a class="text-muted text-uppercase">(withdraw)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div>
                <section class="panel panel-featured-left panel-featured-tertiary">
                    <div class="panel-body">
                        <div class="widget-summary">
                            <div class="widget-summary-col widget-summary-col-icon">
                                <div class="summary-icon bg-tertiary">
                                    <i class="fa fa-shopping-cart"></i>
                                </div>
                            </div>
                            <div class="widget-summary-col">
                                <div class="summary">
                                    <h4 class="title">Today's Orders</h4>
                                    <div class="info">
                                        <strong class="amount">38</strong>
                                    </div>
                                </div>
                                <div class="summary-footer">
                                    <a class="text-muted text-uppercase">(statement)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div>
                <section class="panel panel-featured-left panel-featured-quartenary">
                    <div class="panel-body">
                        <div class="widget-summary">
                            <div class="widget-summary-col widget-summary-col-icon">
                                <div class="summary-icon bg-quartenary">
                                    <i class="fa fa-user"></i>
                                </div>
                            </div>
                            <div class="widget-summary-col">
                                <div class="summary">
                                    <h4 class="title">Today's Visitors</h4>
                                    <div class="info">
                                        <strong class="amount">3765</strong>
                                    </div>
                                </div>
                                <div class="summary-footer">
                                    <a class="text-muted text-uppercase">(report)</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
{% endblock %}